<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>国庆出行计划</title>

    <link rel="stylesheet" href="../static/css/lottery.css"/>

    <script src="../static/js/vue.min.js"></script>

</head>
<body>

<div class="lottery-box" id="app">
    <h1 class="title">国庆出行计划</h1>
    <div class="lottery">
        <div class="lottery-item">
            <div class="lottery-start">
                <div class="box gray" v-if="isStart===0">
                    <p>活动未开始</p>
                </div>
                <div class="box" @click="startLottery" v-if="isStart===1">
                    <p><b>抽奖</b></p>
                    <!--                    <p>消耗{{score}}积分</p>-->
                    <p>计划出行</p>
                </div>
                <div class="box gray" v-if="isStart===2">
                    <p>活动已过期</p>
                </div>
            </div>
            <ul>
                <li v-for="(item,i) in list" :class="i==index?'on':''">
                    <div class="box">
                        <p><img :src="item.img" alt=""></p>
                        <p>{{item.title}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 中奖弹窗 -->
    <div class="mask" v-if="showToast"></div>
    <div class="lottery-alert" v-if="showToast">
        <h1>恭喜您</h1>
        <p><img :src="list[index].img" alt=""></p>
        <h2>获得{{list[index].title}}</h2>
        <div class="btnsave" @click="showToast=false">确定</div>
    </div>
</div>

<script src="../static/js/lottery.js"></script>

</body>
</html>
